import React, { ReactNode } from 'react';
import { Col, Icon, Row } from '../..';
import DemoBlock from '../../../site/components/DemoBlock';
import useDemoTranslate from '../../../site/hooks/use-demo-translate';
import { Dictionary } from '../../utils/interface';
import { createBEM } from '../../utils/namespace';
import { DEFAULT_ICONS } from '../Icon';
import './basic.less';

const bem = createBEM('demo-icon');

const I18N: Dictionary<Dictionary<string>> = {
	'zh-CN': {
		basicUsage: '基础用法',
		iconColor: '图标颜色',
		iconSize: '图标尺寸',
		iconSpin: '旋转动画',
		iconSpinner: 'Icon.Spinner',
		iconList: '图标列表',
	},
	'en-US': {
		basicUsage: 'Basic Usage',
		iconColor: 'Icon color',
		iconSize: 'Icon size',
		iconSpin: 'Spin animation',
		iconSpinner: 'Icon.Spinner',
		iconList: 'Icon list',
	},
};

const ICONS = Object.keys(DEFAULT_ICONS);

export default function Basic(): ReturnType<React.FC> {
	const [i18n] = useDemoTranslate(I18N, 'en-US');

	return (
		<>
			<DemoBlock cardMode={true} title={i18n.basicUsage}>
				<Row>
					<Col span={6}>
						<Icon name="success" />
					</Col>
				</Row>
			</DemoBlock>
			<DemoBlock cardMode={true} title={i18n.iconColor}>
				<Row>
					<Col span={6}>
						<Icon name="success" color="#1989fa" />
					</Col>
					<Col span={6}>
						<Icon name="fail" color="#ee0a24" />
					</Col>
				</Row>
			</DemoBlock>
			<DemoBlock cardMode={true} title={i18n.iconSize}>
				<Row>
					<Col span={6}>
						<Icon name="arrow-right" size="20" />
					</Col>
					<Col span={6}>
						<Icon name="arrow-left" size="3rem" />
					</Col>
				</Row>
			</DemoBlock>
			<DemoBlock cardMode={true} title={i18n.iconSpin}>
				<Row>
					<Col span={6}>
						<Icon name="plus" spin={true} />
					</Col>
				</Row>
			</DemoBlock>
			<DemoBlock cardMode={true} title={i18n.iconSpinner}>
				<Row>
					<Col span={6}>
						<Icon.Spinner />
					</Col>
				</Row>
			</DemoBlock>
			<DemoBlock cardMode={true} title={i18n.iconList}>
				{ICONS.map(
					(name): ReactNode => {
						return (
							<div key={name} className={bem('icon')}>
								<Icon name={name} />
								<p className={bem('icon-desc')}>{name}</p>
							</div>
						);
					},
				)}
			</DemoBlock>
		</>
	);
}
